.spin-wrap {
  position: relative;
  .spin-popper {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 4;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    flex-direction: column;
    .loading__text {
      padding-top: 5px;
      color: $--color-primary;
      opacity: 0.8;
    }
    .loading__text--default {
      font-size: 13px;
    }
    .loading__text--small {
      font-size: 12px;
    }
    .loading__text--large {
      font-size: 14px;
    }
  }
  .spin-popper--blur {
    clear: both;
    overflow: hidden;
    opacity: 0.5;
    user-select: none;
    pointer-events: none;
  }

  .spinner-rect {
    position: relative;
    display: inline-block;
    background: transparent;
    .cube1,
    .cube2 {
      background-color: $--color-primary;
      position: absolute;
      top: 0;
      left: 0;
      margin-left: -20px;
      margin-top: -20px;
      animation: cubemove 1.8s infinite ease-in-out;
    }

    .cube2 {
      animation-delay: -0.9s;
    }

    @-webkit-keyframes cubemove {
      25% {
        -webkit-transform: translateX(28px) rotate(-90deg) scale(0.5);
      }
      50% {
        -webkit-transform: translateX(28px) translateY(28px) rotate(-180deg);
      }
      75% {
        -webkit-transform: translateX(0px) translateY(28px) rotate(-270deg) scale(0.5);
      }
      100% {
        -webkit-transform: rotate(-280deg);
      }
    }

    @keyframes cubemove {
      25% {
        transform: translateX(28px) rotate(-90deg) scale(0.5);
      }
      50% {
        transform: translateX(28px) translateY(28px) rotate(-179deg);
      }
      50.1% {
        transform: translateX(28px) translateY(28px) rotate(-180deg);
      }
      75% {
        transform: translateX(0px) translateY(28px) rotate(-270deg) scale(0.5);
      }
      100% {
        transform: rotate(-280deg);
      }
    }

    &.spinner-rect--default {
      width: 20px;
      height: 20px;
      .cube1,
      .cube2 {
        width: 10px;
        height: 10px;
      }
    }

    &.spinner-rect--small {
      width: 14px;
      height: 14px;
      .cube1,
      .cube2 {
        width: 8px;
        height: 8px;
      }
    }

    &.spinner-rect--large {
      width: 26px;
      height: 26px;
      .cube1,
      .cube2 {
        width: 12px;
        height: 12px;
      }
    }
  }

  .spinner-dot {
    transform: rotate(45deg);
    animation: antRotate 1.2s infinite linear;
    position: relative;
    display: inline-block;
    background: transparent;
    i {
      border-radius: 100%;
      background-color: $--color-primary;
      transform: scale(0.75);
      display: block;
      position: absolute;
      opacity: 0.4;
      animation: antSpinMove 1s infinite linear alternate;
      transform-origin: 50% 50%;
      &:nth-child(1) {
        left: 0;
        top: 0;
      }
      &:nth-child(2) {
        right: 0;
        top: 0;
        animation-delay: 0.4s;
      }
      &:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: 0.8s;
      }
      &:nth-child(4) {
        left: 0;
        bottom: 0;
        animation-delay: 1.2s;
      }
    }
    @keyframes antSpinMove {
      to {
        opacity: 1;
      }
    }
    @keyframes antRotate {
      to {
        transform: rotate(405deg);
      }
    }
    &.spinner-dot--default {
      width: 20px;
      height: 20px;
      i {
        width: 9px;
        height: 9px;
      }
    }
    &.spinner-dot--small {
      width: 14px;
      height: 14px;
      i {
        width: 6px;
        height: 6px;
      }
    }
    &.spinner-dot--large {
      width: 32px;
      height: 32px;
      i {
        width: 14px;
        height: 14px;
      }
    }
  }

  .spinner-circle {
    width: 30px;
    height: 30px;
    animation: loading-rotate 2s linear infinite;
    @keyframes loading-rotate {
      100% {
        -webkit-transform: rotate(1turn);
        transform: rotate(1turn);
      }
    }
    .path {
      stroke-width: 4;
      stroke-linecap: round;
      &.path-background {
        stroke: #d8dee1;
      }
      &.path-loading {
        animation: loading-dash 1.5s ease-in-out infinite;
        stroke-dasharray: 90, 150;
        stroke-dashoffset: 0;
        stroke: $--color-primary;
      }
    }
    &.spinner-circle--default {
      width: 30px;
      height: 30px;
    }
    &.spinner-circle--small {
      width: 22px;
      height: 22px;
    }
    &.spinner-circle--large {
      width: 38px;
      height: 38px;
    }
  }

  .spinner-circular {
    height: 42px;
    width: 42px;
    animation: loading-rotate 2s linear infinite;
    .path {
      animation: loading-dash 1.5s ease-in-out infinite;
      stroke-dasharray: 90, 150;
      stroke-dashoffset: 0;
      stroke-width: 2;
      stroke: $--color-primary;
      stroke-linecap: round;
    }
    &.spinner-circular--default {
      width: 30px;
      height: 30px;
    }
    &.spinner-circular--small {
      width: 22px;
      height: 22px;
    }
    &.spinner-circular--large {
      width: 40px;
      height: 40px;
    }
  }
}
